<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{pmsg}}</div>
        <menu-item :menu-title='ptitle'></menu-item>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        //父组件向子组件传值-props属性名规则

        Vue.component('third-com', {
            props: ['testTile'],
            //字符串形式的模板中没有这个限制
            template: '<div>{{testTile}}</div>'
        });
        Vue.component('menu-item', {
            //在props中使用驼峰形式，模板中需要使用短横线的形式
            props: ['menuTitle'],
            template: '<div>{{menuTitle}}<third-com testTile="hello"></third-com></div>'
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                ptitle: '动态绑定属性'
            }
        });
    </script>
</body>

</html>